<template>
	<view class="page-content">
		<!-- 标题栏和状态栏占位符 -->
		<view class="titleNview-placing"></view>
		<view class="page-top">
			<image class="t-logo" src="/static/index/logo.png"></image>
		</view>
		<!-- 用户信息 -->
		<view class="page-box-user">
			<view class="page-box-user-l">
				<view class="user-box-img">
					<image class="user-img" src="/static/user/img-tx.png"></image>
				</view>
				
				<view class="page-box-user-t">
					<!-- <view class="user-name">Suelinan</view> -->
					<view class="user-time">{{i18n.user.dianhuahaoma}}：{{datalist.mobile}}</view>
				</view>
			</view>
			<view class="page-box-user-r" @click="toUserAccount">{{i18n.user.tongyongzhanghu}}<view class="icons icon-gengduo"></view></view>
		</view>

		<!--内容-->
		<view class="page-body">
			<view class="user-box">
				<navigator hover-class="none" :url="`${item.url}`" class="box-ul" v-for="(item,index) in list"
					:key="index">
					<view class="box-li">
						<view class="box-li-l">
							<image class="box-li-l-img" :src="item.icon"></image>
							<view class="box-li-l-txt">{{item.name}}<text
									v-if="index===0||index===1">({{item.num}})</text>
							</view>
						</view>
						<view class="box-li-r icons icon-gengduo"></view>
					</view>
				</navigator>
			</view>
		</view>
		<!--内容-->
		<view class="page-body">
			<view class="user-box2">
				<view class="box-li" @click="toAccount">
					<view class="box-li-l">
						<image class="box-li-l-img" src="/static/user/icon-user.png"></image>
						<view class="box-li-l-txt">{{i18n.user.zhanghushezhi}}
						</view>
					</view>
					<view class="box-li-r icons icon-gengduo"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import {
		indexInfos,
	} from '@/common/api.js';
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";
	import rProgress from '@/components/w-progress/r-progress.vue';
	import wProgress from '@/components/w-progress/w-progress.vue';
	export default {
		components: {
			cmdProgress,
			wProgress,
			rProgress,
		},
		data() {
			return {
				datalist:{
					mobile:''
				},
				bind_code:0,
				code_code:0
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			list() {
				return [{
					icon: '/static/user/icon-facility.png',
					name: this.$t('message').user.gerenshebei,
					num: this.bind_code,
					url: '/pages/user/personalDevices'
				}, {
					icon: '/static/user/icon-key.png',
					name: this.$t('message').user.jihuoma,
					num: this.code_code,
					url: '/pages/user/activationCode'
				}, {
					icon: '/static/user/icon-record.png',
					name: this.$t('message').user.shiyongjilu,
					num: 0,
					url: '/pages/user/usageRecord'
				}, {
					icon: '/static/user/icon-language.png',
					name: this.$t('message').user.yuyanshezhi,
					num: 0,
					url: '/pages/user/language'
				}];
			}
		},
		onShow() {
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: this.i18n.tabBar.user
			});
			// tabbar语言设置
			let _self = this;
			uni.setTabBarItem({
				index: 0,
				text: _self.i18n.tabBar.home
			});
			uni.setTabBarItem({
				index: 1,
				text: _self.i18n.tabBar.vicinity
			});
			uni.setTabBarItem({
				index: 2,
				text: _self.i18n.tabBar.shopping
			});
			uni.setTabBarItem({
				index: 3,
				text: _self.i18n.tabBar.user
			});
			this.getdata();
			
		},
		methods: {
			getdata(){
				indexInfos().then(res =>{
					console.log(333,res)
					if(res.code === 2000){
						this.datalist.mobile = res.data.mobile;
						this.bind_code = res.data.bind_count;
						this.code_code = res.data.code_count;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				})
			},
			toUserAccount(){
				uni.navigateTo({
					url:"/pages/account/recharge"
				})
			},
			//跳转账户设置
			toAccount(){
				uni.navigateTo({
					url:"/pages/user/userAccount"
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}
	.user-box,
	.user-box2 {
		display: flex;
		flex-direction: column;
		width: 100%;

		.box-li {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx;
			border-bottom: 1rpx solid #3F3F3F;

			.box-li-l {
				display: flex;
				align-items: center;

				.box-li-l-img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 18rpx;
				}

				.box-li-l-txt {
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.box-li:last-of-type {
			border-bottom: none;
		}

	}

	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color;
		color: $font-color-w;
		padding: $page-row-spacing;

		//内容
		.page-body {
			display: flex;
			background: $uni-bg-box-color;
			box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(0, 0, 0, 0.44);
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		//头部
		.page-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.t-logo {
				width: 239rpx;
				height: 40rpx;
			}

			.t-button {
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				padding: 0 20rpx;
				background: $uni-but-bg-color;
				font-size: $font-sm;
			}

			.t-tit {
				font-size: $font-base;
			}
		}

		//用户信息
		.page-box-user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 189rpx;
			background: $uni-bg-box-color;
			box-shadow: 0rpx 2rpx 9rpx 0rpx rgba(0, 0, 0, 0.44);
			border-radius: 20rpx;
			padding: 30rpx 40rpx;
			margin-bottom: 56rpx;

			.page-box-user-l {
				display: flex;
				align-items: center;
				.user-box-img{
					width: 120rpx;
					height: 120rpx;
					margin-right: 30rpx;
					.user-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 60rpx;
						background: rgba(255, 255, 255, .1);
					}
				}

				.page-box-user-t {
					display: flex;
					flex-wrap: wrap;

					.user-name {
						font-size: $font-base;
						margin-bottom: 20rpx;
					}

					.user-time {
						font-size: $font-base;
					}
				}
			}

			.page-box-user-r {
				display: flex;
				align-items: center;
				font-size: $font-base;
			}
		}
	}
</style>
